<template>
  <div>
    <SearchForm @search="handleSearchData" />
    <UserListTable :userList="userList" @edit="editUser" @prohibition="prohibitionUser"/>
    <MyPage
      :pageSize="pageSize"
      :pageSizes="pageSizes"
      :currentPage="currentPage"
      :total="total"
      @sizeChange="sizeChange"
      @currentChange="currentChange"/>
  </div>
</template>

<script>
import SearchForm from './components/SearchForm.vue'
import UserListTable from './components/UserListTable.vue'
import MyPage from '@/components/myPage.vue'
import Util from '@/common/util'

export default {
  data () {
    return {
      userList: [],
      pageSize: 10,
      pageSizes: [5, 10, 20, 50, 100],
      total: 0,
      currentPage: 1,
      searchData: {}
    }
  },
  created () {
    this.listUserData()
  },
  methods: {
    listUserData () {
      this.myGet('/uc/user', {page: this.currentPage, size: this.pageSize, ...this.searchData}).then(data => {
        this.userList = data.content.map(item => {
          return {
            id: item.id,
            username: item.username,
            nickname: item.nickname,
            name: item.nickname,
            roles: item.userRoles.map(n => n.roleName).join(','),
            phone: item.telephone,
            gmtCreate: Util.formatTime(new Date(item.gmtCreate)),
            bizStatus: item.bizStatus,
            lasttime: Util.formatTime(new Date(item.loginTime))
          }
        })
        this.total = data.totalElements
      }).catch(e => {
        this.$message.error(e)
      })
    },
    editUser (data) {
      this.$router.push({
        name: 'editUser',
        params: {
          id: data.id
        }
      })
    },
    prohibitionUser (data) {
      if (data.bizStatus === 2) {
        // 解禁用户
        this.myPut(`/uc/user/status?id=${data.id}&bizStatus=1`).then(data => {
          this.listUserData()
        })
      } else {
        // 封禁用户
        this.myPut(`/uc/user/status?id=${data.id}&bizStatus=2`).then(data => {
          this.listUserData()
        })
      }
    },
    sizeChange (data) {
      this.pageSize = data
      this.listUserData()
    },
    currentChange (current) {
      this.currentPage = current
      this.listUserData()
    },
    handleSearchData (data) {
      this.searchData = data
      this.page = 1
      this.listUserData()
    }
  },
  components: {
    SearchForm,
    UserListTable,
    MyPage
  }
}
</script>


<style scoped>
.user-search-input {
  width: 300px;
}
</style>
